<template>
  <div>
    <div>
      <h1 style="color: #181d80">{{ title }}</h1>
    </div>
    <span>
      <div id="container"></div>
      <div id="mountNode"></div>
      <div style="width: 500px">
        <el-tag>第一学期完成率：</el-tag
        ><el-progress
          :text-inside="true"
          :stroke-width="30"
          :percentage="this.p1"
          status="success"
        ></el-progress>
        <el-tag>第二学期完成率：</el-tag
        ><el-progress
          :text-inside="true"
          :stroke-width="30"
          :percentage="this.p2"
          status="success"
        ></el-progress>
        <el-tag type="">增长率</el-tag>
        <template v-if="this.flag === 1">
          <el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="this.increase"
            status="success"
          ></el-progress>
        </template>
        <template v-if="this.flag === 0">
          <el-progress
            :text-inside="true"
            :stroke-width="30"
            :percentage="this.increase"
            status="exception"
          ></el-progress>
        </template>
      </div>
    </span>
  </div>
</template>

<script>
import { DualAxes } from "@antv/g2plot";

export default {
  name: "studentDualAxes",
  data() {
    return {
      p1: "",
      p2: "",
      p3: "",
      p4: "",
      add1: "",
      add2: "",
      increase: "",
      flag: "",
      user: JSON.parse(window.sessionStorage.getItem("user")),
      title: "大一整学年学生跑步数据详情",
    };
  },

  methods: {
    testTwo() {
      this.getRequest("/clazz/" + this.user.clazz, {}).then((resp) => {
        let p1 = 0,
          p2 = 0,
          p3 = 0,
          p4 = 0,
          add1 = 0,
          add2 = 0,
          increase = 0;
        for (var i = 0; i < resp.length; i++) {
          if (resp[i].mileageTerm1 >= 50) p1++;
          if (resp[i].mileageTerm2 >= 50) p2++;
          if (resp[i].mileageTerm3 >= 50) p3++;
          if (resp[i].mileageTerm4 >= 50) p4++;
          add1 += resp[i].mileageTerm1;
          add2 += resp[i].mileageTerm2;
        }
        this.p1 = ((p1 / resp.length).toFixed(4) * 100).toFixed(2);
        this.p2 = ((p2 / resp.length).toFixed(4) * 100).toFixed(2);
        this.p3 = ((p3 / resp.length).toFixed(4) * 100).toFixed(2);
        this.p4 = ((p4 / resp.length).toFixed(4) * 100).toFixed(2);
        this.increase = (add2 - add1) / add1;
        if (this.increase > 0) {
          this.flag = 1;
        } else {
          this.flag = 0;
        }
        const dualAxes = new DualAxes("container", {
          data: [resp, resp],
          xField: "name",
          yField: ["mileageTerm1", "mileageTerm2"],
          geometryOptions: [
            {
              geometry: "line",
              color: "#1bf4f9",
            },
            {
              geometry: "line",
              color: "#43d821",
            },
          ],
        });

        dualAxes.render();
      });
    },
  },

  mounted() {
    this.testTwo();
  },
};
</script>

<style scoped></style>
